<template>
    <div>
        <div class="date">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="法律状态">
                    <el-select v-model="form.status" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" 
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            style="width: 96%;border:none;margin:0 auto;"
            :row-class-name="tableRowClassName"
            :row-style="{border:'none'}"
            :cell-style="{border:'none'}">
              <el-table-column prop="type" label="纠纷类型" width="180"></el-table-column>
              <el-table-column prop="pn" label="公开/公告号"></el-table-column>
              <el-table-column prop="legalStatus" label="法律状态"></el-table-column>
              <el-table-column prop="prosecutor" label="原告">
                <template slot-scope="scope">
                  <p v-html="scope.row.prosecutor"></p>
                </template>
              </el-table-column>
              <el-table-column prop="defendant" label="被告">
                <template slot-scope="scope">
                  <p v-html="scope.row.defendant"></p>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="ips"
                :current-page.sync="ipi"
                @current-change="getSuitCurrentPage"
                class="el-pagination"
              ></el-pagination>
            </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            tableData:[
                {type:'专利纠纷',pn:'CN101822160B',legalStatus:'授权',prosecutor:'1.卡西欧株式会社',defendant:'某'},
                {type:'专利纠纷',pn:'CN101822160B',legalStatus:'授权',prosecutor:'1.卡西算机株式会社',defendant:'某'},
                {type:'专利纠纷',pn:'CN101822260B',legalStatus:'授权',prosecutor:'1.卡西算机株式会社',defendant:'某'}
            ],
            total:0,
            ipi:1,
            ips:5,
            form:{
                status:''
            },
            options:[
                {
                    value: '0',
                    label: '全部'
                },
                {
                    value: '1',
                    label: '授权'
                },
                {
                    value: '2',
                    label: '失效'
                },
                {
                    value: '3',
                    label: '公开'
                },
                {
                    value: '4',
                    label: '撤回'
                },
                {
                    value: '5',
                    label: '驳回'
                },
                {
                    value: '6',
                    label: '其它'
                }
            ]
        }
    },
    mounted(){

    },
    methods:{
        tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2) {
            return 'warning-row';
            } 
            return '';
        },
        getSuitCurrentPage(val) {
            this.ipi = val;
            this.getSuit();
        },
        // 专利纠纷
        getSuit() {
            this.$get(this.$Url.patent.suit, {
                companyName: '江苏天奈科技股份有限公司',
                ipi: this.ipi,
                ips: this.ips
            }).then(data => {
                let res = data.data;
                if (res) {
                    this.total = res.total;
                    let result = res.result;
                    this.tableData = [];
                    for (let i = 0; i < result.length; i++) {
                    let resultI = result[i];
                    // 法律状态
                    let legalStatus = resultI.legalStatus;
                    if (legalStatus === "0") {
                        legalStatus = "";
                    } else if (legalStatus === "1") {
                        legalStatus = "公开";
                    } else if (legalStatus === "2") {
                        legalStatus = "授权";
                    } else if (legalStatus === "3") {
                        legalStatus = "失效";
                    } else if (legalStatus === "4") {
                        legalStatus = "撤回";
                    } else if (legalStatus === "5") {
                        legalStatus = "驳回";
                    }
                    // 原告
                    let prosecutor = "";
                    for (let i = 0; i < JSON.parse(resultI.prosecutor).length; i++) {
                        prosecutor += `${JSON.parse(resultI.prosecutor)[i]}`;
                        if (i < resultI.prosecutor.length - 1) {
                        prosecutor += `<br/>`;
                        }
                    }
                    // 被告
                    let defendant = "";
                    for (let i = 0; i < JSON.parse(resultI.defendant).length; i++) {
                        defendant += `${JSON.parse(resultI.defendant)[i]}`;
                        if (i < resultI.defendant.length - 1) {
                        defendant += `<br/>`;
                        }
                    }
                    let obj = {
                        type: "专利纠纷",
                        pn: resultI.pn,
                        legalStatus: legalStatus,
                        prosecutor: prosecutor,
                        defendant: defendant
                    };
                    this.tableData.push(obj);
                    }
                }
            }).catch(error => {});
        }
    }
}
</script>
<style lang="scss" scoped>
.date{
    padding-top:20px;
}
.pagination{
    text-align:center;
    padding:20px 0;
}
</style>